import { ECharts, init } from 'echarts';
import React, { useEffect, useRef, useState } from 'react';

const EchartsRender = ({ option }: any) => {
  const [myChart, setMyChart] = useState<ECharts>();
  const ref = useRef(null);
  useEffect(() => {
    const chart = init(ref.current);
    chart.setOption(option);
    setMyChart(chart);
  }, []);

  useEffect(() => {
    if (myChart?.setOption) {
      myChart.setOption(option, true);
      myChart?.resize();
    }
  }, [myChart, option]);
  return <div ref={ref} style={{ height: '100%', width: '100%' }} />;
};

export default React.memo(EchartsRender);
